<template>
  <div class="interview-applications-container">
    <div class="page-header">
      <div class="header-content">
        <div class="header-left">
          <h1 class="page-title">面试预约申请</h1>
          <div class="page-subtitle">审核和管理学生的面试申请</div>
        </div>
        <div class="header-actions">
          <el-button
            v-if="selectedApplications.length > 0"
            type="success"
            @click="batchApprove"
            :loading="batchProcessing"
          >
            <el-icon><Check /></el-icon>
            批量通过 ({{ selectedApplications.length }})
          </el-button>
          <el-button @click="refreshData" :loading="loading">
            <el-icon><Refresh /></el-icon>
            刷新
          </el-button>
        </div>
      </div>
    </div>

    <div class="page-content">
      <!-- 统计卡片 -->
      <div class="statistics-section">
        <el-row :gutter="24">
          <el-col :xl="6" :lg="6" :md="12" :sm="12" :xs="24">
            <el-card class="stat-card">
              <div class="stat-content">
                <div class="stat-icon pending">
                  <el-icon><Clock /></el-icon>
                </div>
                <div class="stat-info">
                  <div class="stat-value">{{ statistics.pending_applications }}</div>
                  <div class="stat-label">待审核</div>
                </div>
              </div>
            </el-card>
          </el-col>
          <el-col :xl="6" :lg="6" :md="12" :sm="12" :xs="24">
            <el-card class="stat-card">
              <div class="stat-content">
                <div class="stat-icon approved">
                  <el-icon><Check /></el-icon>
                </div>
                <div class="stat-info">
                  <div class="stat-value">{{ statistics.approved_applications }}</div>
                  <div class="stat-label">已通过</div>
                </div>
              </div>
            </el-card>
          </el-col>
          <el-col :xl="6" :lg="6" :md="12" :sm="12" :xs="24">
            <el-card class="stat-card">
              <div class="stat-content">
                <div class="stat-icon completed">
                  <el-icon><CircleCheck /></el-icon>
                </div>
                <div class="stat-info">
                  <div class="stat-value">{{ statistics.completed_interviews }}</div>
                  <div class="stat-label">已完成</div>
                </div>
              </div>
            </el-card>
          </el-col>
          <el-col :xl="6" :lg="6" :md="12" :sm="12" :xs="24">
            <el-card class="stat-card">
              <div class="stat-content">
                <div class="stat-icon total">
                  <el-icon><User /></el-icon>
                </div>
                <div class="stat-info">
                  <div class="stat-value">{{ statistics.total_applications }}</div>
                  <div class="stat-label">总申请</div>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>

      <!-- 筛选条件 -->
      <div class="filter-section">
        <el-card class="filter-card" shadow="never">
          <el-row :gutter="16" class="filter-row">
            <el-col :xl="6" :lg="8" :md="12" :sm="24" :xs="24">
              <el-select
                v-model="filters.status"
                placeholder="申请状态"
                clearable
                @change="handleFilterChange"
                class="filter-select"
              >
                <el-option label="全部" value="" />
                <el-option label="待审核" value="pending" />
                <el-option label="已通过" value="approved" />
                <el-option label="已拒绝" value="rejected" />
                <el-option label="已安排" value="scheduled" />
                <el-option label="已完成" value="completed" />
              </el-select>
            </el-col>
            <el-col :xl="6" :lg="8" :md="12" :sm="24" :xs="24">
              <el-select
                v-model="filters.interview_type"
                placeholder="面试类型"
                clearable
                @change="handleFilterChange"
                class="filter-select"
              >
                <el-option label="全部" value="" />
                <el-option label="练习面试" value="practice" />
                <el-option label="模拟面试" value="mock" />
                <el-option label="评估面试" value="assessment" />
                <el-option label="职业指导" value="career_guidance" />
              </el-select>
            </el-col>
            <el-col :xl="6" :lg="8" :md="12" :sm="24" :xs="24">
              <el-input
                v-model="filters.keyword"
                placeholder="搜索学生姓名或标题"
                clearable
                @input="handleSearch"
                class="filter-input"
              >
                <template #prefix>
                  <el-icon><Search /></el-icon>
                </template>
              </el-input>
            </el-col>
            <el-col :xl="6" :lg="24" :md="12" :sm="24" :xs="24">
              <div class="filter-actions">
                <el-button type="primary" @click="handleFilterChange">
                  <el-icon><Search /></el-icon>
                  搜索
                </el-button>
                <el-button @click="resetFilters">
                  <el-icon><Refresh /></el-icon>
                  重置
                </el-button>
              </div>
            </el-col>
          </el-row>
        </el-card>
      </div>

      <!-- 申请列表 -->
      <div class="table-section">
        <el-card class="table-card" shadow="never">
          <div class="table-container">
            <el-table
              :data="applicationList"
              v-loading="loading"
              stripe
              class="application-table"
              :height="tableHeight"
              :header-cell-style="{ background: 'var(--el-fill-color-lighter)', color: 'var(--el-text-color-primary)', fontWeight: '600' }"
              @selection-change="handleSelectionChange"
              empty-text="暂无面试申请"
            >
              <el-table-column
                type="selection"
                width="55"
                :selectable="row => row.status === 'pending'"
              />
              <el-table-column prop="student_name" label="学生姓名" min-width="120" show-overflow-tooltip />
              
              <el-table-column prop="student_id" label="学号" min-width="120" show-overflow-tooltip />
              
              <el-table-column prop="title" label="申请标题" min-width="200" show-overflow-tooltip />
              
              <el-table-column prop="interview_type" label="面试类型" width="120" align="center">
                <template #default="{ row }">
                  <el-tag :type="getTypeTagType(row.interview_type)" size="small">
                    {{ row.type_display }}
                  </el-tag>
                </template>
              </el-table-column>

              <el-table-column prop="status" label="申请状态" width="120" align="center">
                <template #default="{ row }">
                  <el-tag :type="getStatusTagType(row.status)" size="small">
                    {{ row.status_display }}
                  </el-tag>
                </template>
              </el-table-column>

              <el-table-column prop="preferred_date" label="期望时间" min-width="160" show-overflow-tooltip>
                <template #default="{ row }">
                  {{ formatPreferredTime(row) }}
                </template>
              </el-table-column>

              <el-table-column prop="scheduled_date" label="安排时间" min-width="160" show-overflow-tooltip>
                <template #default="{ row }">
                  {{ formatScheduledTime(row) }}
                </template>
              </el-table-column>

              <el-table-column prop="created_at" label="申请时间" min-width="160" show-overflow-tooltip>
                <template #default="{ row }">
                  {{ formatDateTime(row.created_at) }}
                </template>
              </el-table-column>

              <el-table-column label="操作" width="200" fixed="right" align="center">
                <template #default="{ row }">
                  <div class="action-buttons">
                    <el-button
                      type="primary"
                      size="small"
                      link
                      @click="viewDetail(row)"
                      class="action-btn"
                    >
                      <el-icon><View /></el-icon>
                      详情
                    </el-button>
                    <el-button
                      v-if="row.status === 'pending'"
                      type="success"
                      size="small"
                      link
                      @click="reviewApplication(row)"
                      class="action-btn"
                    >
                      <el-icon><Edit /></el-icon>
                      审核
                    </el-button>
                    <el-button
                      v-if="row.status === 'completed'"
                      type="info"
                      size="small"
                      link
                      @click="viewResult(row)"
                      class="action-btn"
                    >
                      <el-icon><Document /></el-icon>
                      结果
                    </el-button>
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </div>

          <!-- 分页 -->
          <div class="pagination-wrapper">
            <el-pagination
              v-model:current-page="pagination.page"
              v-model:page-size="pagination.pageSize"
              :page-sizes="[10, 20, 50, 100]"
              :total="pagination.total"
              layout="total, sizes, prev, pager, next, jumper"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              background
            />
          </div>
        </el-card>
      </div>
    </div>

    <!-- 审核对话框 -->
    <el-dialog
      v-model="showReviewDialog"
      title="审核面试申请"
      width="700px"
      :close-on-click-modal="false"
    >
      <div v-if="currentApplication" class="review-content">
        <!-- 申请信息 -->
        <div class="application-info">
          <h4>申请信息</h4>
          <el-descriptions :column="2" border>
            <el-descriptions-item label="学生姓名">{{ currentApplication.student_name }}</el-descriptions-item>
            <el-descriptions-item label="学号">{{ currentApplication.student_id }}</el-descriptions-item>
            <el-descriptions-item label="面试类型">{{ currentApplication.type_display }}</el-descriptions-item>
            <el-descriptions-item label="申请标题">{{ currentApplication.title }}</el-descriptions-item>
            <el-descriptions-item label="期望时间" :span="2">
              {{ formatPreferredTime(currentApplication) }}
            </el-descriptions-item>
            <el-descriptions-item label="申请说明" :span="2">
              {{ currentApplication.description }}
            </el-descriptions-item>
          </el-descriptions>
        </div>

        <!-- 审核表单 -->
        <div class="review-form">
          <h4>审核决定</h4>
          <el-form
            ref="reviewFormRef"
            :model="reviewForm"
            :rules="reviewRules"
            label-width="100px"
          >
            <el-form-item label="审核结果" prop="status">
              <el-radio-group v-model="reviewForm.status">
                <el-radio value="approved">通过</el-radio>
                <el-radio value="rejected">拒绝</el-radio>
              </el-radio-group>
            </el-form-item>

            <el-form-item label="审核意见" prop="review_comments">
              <el-input
                v-model="reviewForm.review_comments"
                type="textarea"
                :rows="3"
                placeholder="请输入审核意见"
              />
            </el-form-item>

            <!-- 通过时需要安排时间 -->
            <template v-if="reviewForm.status === 'approved'">
              <el-form-item label="安排日期" prop="scheduled_date">
                <el-date-picker
                  v-model="reviewForm.scheduled_date"
                  type="date"
                  placeholder="选择面试日期"
                  format="YYYY-MM-DD"
                  value-format="YYYY-MM-DD"
                  style="width: 100%"
                />
              </el-form-item>

              <el-form-item label="面试时间" prop="scheduled_time_start">
                <el-row :gutter="16">
                  <el-col :span="12">
                    <el-time-picker
                      v-model="reviewForm.scheduled_time_start"
                      placeholder="开始时间"
                      format="HH:mm"
                      value-format="HH:mm"
                      style="width: 100%"
                    />
                  </el-col>
                  <el-col :span="12">
                    <el-time-picker
                      v-model="reviewForm.scheduled_time_end"
                      placeholder="结束时间"
                      format="HH:mm"
                      value-format="HH:mm"
                      style="width: 100%"
                    />
                  </el-col>
                </el-row>
              </el-form-item>

              <el-form-item label="面试地点" prop="location">
                <el-input
                  v-model="reviewForm.location"
                  placeholder="请输入面试地点"
                />
              </el-form-item>
            </template>
          </el-form>
        </div>
      </div>

      <template #footer>
        <div class="dialog-footer">
          <el-button @click="showReviewDialog = false">取消</el-button>
          <el-button type="primary" @click="submitReview" :loading="submitting">
            提交审核
          </el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 批量审核对话框 -->
    <el-dialog
      v-model="showBatchDialog"
      title="批量审核面试申请"
      width="600px"
      :close-on-click-modal="false"
    >
      <div class="batch-review-content">
        <div class="selected-count">
          <el-alert
            :title="`已选择 ${selectedApplications.length} 个待审核申请`"
            type="info"
            :closable="false"
            show-icon
          />
        </div>

        <el-form
          ref="batchFormRef"
          :model="batchForm"
          :rules="batchRules"
          label-width="100px"
          style="margin-top: 20px;"
        >
          <el-form-item label="审核结果" prop="status">
            <el-radio-group v-model="batchForm.status">
              <el-radio value="approved">批量通过</el-radio>
              <el-radio value="rejected">批量拒绝</el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item label="审核意见" prop="review_comments">
            <el-input
              v-model="batchForm.review_comments"
              type="textarea"
              :rows="3"
              placeholder="请输入批量审核意见"
            />
          </el-form-item>

          <!-- 批量通过时的时间设置 -->
          <template v-if="batchForm.status === 'approved'">
            <el-form-item label="统一日期" prop="scheduled_date">
              <el-date-picker
                v-model="batchForm.scheduled_date"
                type="date"
                placeholder="选择面试日期"
                format="YYYY-MM-DD"
                value-format="YYYY-MM-DD"
                style="width: 100%"
                :disabled-date="disabledDate"
              />
            </el-form-item>

            <el-form-item label="时间段" prop="scheduled_time_start">
              <el-row :gutter="16">
                <el-col :span="12">
                  <el-time-picker
                    v-model="batchForm.scheduled_time_start"
                    placeholder="开始时间"
                    format="HH:mm"
                    value-format="HH:mm"
                    style="width: 100%"
                  />
                </el-col>
                <el-col :span="12">
                  <el-time-picker
                    v-model="batchForm.scheduled_time_end"
                    placeholder="结束时间"
                    format="HH:mm"
                    value-format="HH:mm"
                    style="width: 100%"
                  />
                </el-col>
              </el-row>
            </el-form-item>

            <el-form-item label="面试地点" prop="location">
              <el-input
                v-model="batchForm.location"
                placeholder="请输入面试地点"
              />
            </el-form-item>
          </template>
        </el-form>
      </div>

      <template #footer>
        <div class="dialog-footer">
          <el-button @click="showBatchDialog = false">取消</el-button>
          <el-button
            type="primary"
            @click="submitBatchReview"
            :loading="batchProcessing"
          >
            确认批量审核
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import {
  Refresh, Clock, Check, CircleCheck, User, Search, View, Edit, Document
} from '@element-plus/icons-vue'
import interviewApi from '@/api/interview'
import { formatDateTime } from '@/utils/format'

const router = useRouter()

// 响应式数据
const loading = ref(false)
const submitting = ref(false)
const batchProcessing = ref(false)
const showReviewDialog = ref(false)
const showBatchDialog = ref(false)

// 列表数据
const applicationList = ref([])
const currentApplication = ref(null)
const selectedApplications = ref([])

// 统计数据
const statistics = reactive({
  total_applications: 0,
  pending_applications: 0,
  approved_applications: 0,
  completed_interviews: 0
})

// 筛选条件
const filters = reactive({
  status: '',
  interview_type: '',
  keyword: ''
})

// 分页
const pagination = reactive({
  page: 1,
  pageSize: 20,
  total: 0
})

// 计算表格高度
const tableHeight = computed(() => {
  return window.innerHeight - 400
})

// 审核表单
const reviewForm = reactive({
  status: '',
  review_comments: '',
  scheduled_date: '',
  scheduled_time_start: '',
  scheduled_time_end: '',
  location: ''
})

const reviewFormRef = ref()
const batchFormRef = ref()

// 批量审核表单
const batchForm = reactive({
  status: 'approved',
  review_comments: '',
  scheduled_date: '',
  scheduled_time_start: '',
  scheduled_time_end: '',
  location: ''
})

// 表单验证规则
const reviewRules = {
  status: [{ required: true, message: '请选择审核结果', trigger: 'change' }],
  review_comments: [{ required: true, message: '请输入审核意见', trigger: 'blur' }],
  scheduled_date: [
    { required: true, message: '请选择面试日期', trigger: 'change' },
    {
      validator: (rule, value, callback) => {
        if (reviewForm.status === 'approved' && !value) {
          callback(new Error('通过申请时必须设置面试日期'))
        } else {
          callback()
        }
      },
      trigger: 'change'
    }
  ],
  scheduled_time_start: [
    { required: true, message: '请选择开始时间', trigger: 'change' },
    {
      validator: (rule, value, callback) => {
        if (reviewForm.status === 'approved' && !value) {
          callback(new Error('通过申请时必须设置开始时间'))
        } else {
          callback()
        }
      },
      trigger: 'change'
    }
  ],
  scheduled_time_end: [
    { required: true, message: '请选择结束时间', trigger: 'change' },
    {
      validator: (rule, value, callback) => {
        if (reviewForm.status === 'approved' && !value) {
          callback(new Error('通过申请时必须设置结束时间'))
        } else if (value && reviewForm.scheduled_time_start && value <= reviewForm.scheduled_time_start) {
          callback(new Error('结束时间必须晚于开始时间'))
        } else {
          callback()
        }
      },
      trigger: 'change'
    }
  ]
}

// 批量审核验证规则
const batchRules = {
  status: [{ required: true, message: '请选择审核结果', trigger: 'change' }],
  review_comments: [{ required: true, message: '请输入审核意见', trigger: 'blur' }],
  scheduled_date: [
    {
      validator: (rule, value, callback) => {
        if (batchForm.status === 'approved' && !value) {
          callback(new Error('批量通过时必须设置面试日期'))
        } else {
          callback()
        }
      },
      trigger: 'change'
    }
  ],
  scheduled_time_start: [
    {
      validator: (rule, value, callback) => {
        if (batchForm.status === 'approved' && !value) {
          callback(new Error('批量通过时必须设置开始时间'))
        } else {
          callback()
        }
      },
      trigger: 'change'
    }
  ]
}

// 禁用过去的日期
const disabledDate = (time) => {
  return time.getTime() < Date.now() - 8.64e7
}

// 获取状态标签类型
const getStatusTagType = (status) => {
  const typeMap = {
    pending: 'warning',
    approved: 'success',
    rejected: 'danger',
    scheduled: 'primary',
    completed: 'success',
    expired: 'info'
  }
  return typeMap[status] || 'info'
}

// 获取类型标签类型
const getTypeTagType = (type) => {
  const typeMap = {
    practice: 'primary',
    mock: 'success',
    assessment: 'warning',
    career_guidance: 'info'
  }
  return typeMap[type] || 'info'
}

// 格式化期望时间
const formatPreferredTime = (row) => {
  if (!row.preferred_date) return '-'
  const timeStr = row.preferred_time_start && row.preferred_time_end 
    ? `${row.preferred_time_start}-${row.preferred_time_end}`
    : ''
  return `${row.preferred_date} ${timeStr}`.trim()
}

// 格式化安排时间
const formatScheduledTime = (row) => {
  if (!row.scheduled_date) return '-'
  const timeStr = row.scheduled_time_start && row.scheduled_time_end 
    ? `${row.scheduled_time_start}-${row.scheduled_time_end}`
    : ''
  return `${row.scheduled_date} ${timeStr}`.trim()
}

// 获取申请列表
const fetchApplicationList = async () => {
  try {
    loading.value = true
    const params = {
      page: pagination.page,
      page_size: pagination.pageSize,
      ...filters
    }
    
    const response = await interviewApi.application.getApplicationList(params)
    applicationList.value = response.data.results || []
    pagination.total = response.data.count || 0
  } catch (error) {
    console.error('获取申请列表失败:', error)
    ElMessage.error('获取申请列表失败')
  } finally {
    loading.value = false
  }
}

// 获取统计数据
const fetchStatistics = async () => {
  try {
    const response = await interviewApi.other.getStatistics()
    Object.assign(statistics, response.data)
  } catch (error) {
    console.error('获取统计数据失败:', error)
  }
}

// 刷新数据
const refreshData = () => {
  fetchApplicationList()
  fetchStatistics()
}

// 筛选变化
const handleFilterChange = () => {
  pagination.page = 1
  fetchApplicationList()
}

// 搜索
const handleSearch = () => {
  // 防抖处理
  clearTimeout(handleSearch.timer)
  handleSearch.timer = setTimeout(() => {
    handleFilterChange()
  }, 500)
}

// 重置筛选
const resetFilters = () => {
  Object.assign(filters, {
    status: '',
    interview_type: '',
    keyword: ''
  })
  handleFilterChange()
}

// 分页变化
const handleSizeChange = () => {
  pagination.page = 1
  fetchApplicationList()
}

const handleCurrentChange = () => {
  fetchApplicationList()
}

// 查看详情
const viewDetail = (row) => {
  if (row.interview_id) {
    // 如果有关联的面试记录，跳转到面试详情页面
    router.push(`/interviews/detail/${row.interview_id}`)
  } else {
    // 如果没有面试记录，显示申请详情
    showApplicationDetail(row)
  }
}

// 显示申请详情弹窗
const showApplicationDetail = (row) => {
  ElMessageBox.alert(
    `
    <div style="text-align: left;">
      <p><strong>申请标题：</strong>${row.title}</p>
      <p><strong>学生姓名：</strong>${row.student_name} (${row.student_id})</p>
      <p><strong>面试类型：</strong>${row.type_display}</p>
      <p><strong>申请状态：</strong>${row.status_display}</p>
      <p><strong>期望日期：</strong>${row.preferred_date}</p>
      <p><strong>期望时间：</strong>${row.preferred_time_start} - ${row.preferred_time_end}</p>
      ${row.scheduled_date ? `<p><strong>安排日期：</strong>${row.scheduled_date}</p>` : ''}
      ${row.scheduled_time_start ? `<p><strong>安排时间：</strong>${row.scheduled_time_start} - ${row.scheduled_time_end}</p>` : ''}
      ${row.location ? `<p><strong>面试地点：</strong>${row.location}</p>` : ''}
      ${row.review_comments ? `<p><strong>审核意见：</strong>${row.review_comments}</p>` : ''}
      <p><strong>申请说明：</strong></p>
      <div style="background: var(--el-fill-color-light); padding: 10px; border-radius: 4px; margin-top: 8px;">
        ${row.description}
      </div>
    </div>
    `,
    '申请详情',
    {
      dangerouslyUseHTMLString: true,
      confirmButtonText: '关闭'
    }
  )
}

// 审核申请
const reviewApplication = (row) => {
  currentApplication.value = row
  resetReviewForm()
  showReviewDialog.value = true
}

// 重置审核表单
const resetReviewForm = () => {
  Object.assign(reviewForm, {
    status: '',
    review_comments: '',
    scheduled_date: '',
    scheduled_time_start: '',
    scheduled_time_end: '',
    location: ''
  })
  reviewFormRef.value?.resetFields()
}

// 提交审核
const submitReview = async () => {
  try {
    await reviewFormRef.value.validate()
    submitting.value = true
    
    await interviewApi.application.reviewApplication(currentApplication.value.id, reviewForm)
    ElMessage.success('审核提交成功')
    showReviewDialog.value = false
    refreshData()
  } catch (error) {
    console.error('提交审核失败:', error)
    ElMessage.error('提交审核失败')
  } finally {
    submitting.value = false
  }
}

// 查看结果
const viewResult = (row) => {
  // 跳转到面试结果页面
  router.push(`/interviews/result/${row.id}`)
}

// 处理选择变化
const handleSelectionChange = (selection) => {
  selectedApplications.value = selection
}

// 批量通过
const batchApprove = () => {
  if (selectedApplications.value.length === 0) {
    ElMessage.warning('请选择要批量通过的申请')
    return
  }

  showBatchDialog.value = true
}

// 批量处理申请
const processBatchApplications = async (batchData) => {
  try {
    batchProcessing.value = true

    const promises = selectedApplications.value.map(app =>
      interviewApi.application.reviewApplication(app.id, batchData)
    )

    await Promise.all(promises)

    ElMessage.success(`成功批量处理 ${selectedApplications.value.length} 个申请`)
    selectedApplications.value = []
    showBatchDialog.value = false
    refreshData()
  } catch (error) {
    console.error('批量处理失败:', error)
    ElMessage.error('批量处理失败，请重试')
  } finally {
    batchProcessing.value = false
  }
}

// 提交批量审核
const submitBatchReview = async () => {
  try {
    await batchFormRef.value.validate()

    // 验证时间逻辑
    if (batchForm.status === 'approved' && batchForm.scheduled_time_end <= batchForm.scheduled_time_start) {
      ElMessage.error('结束时间必须晚于开始时间')
      return
    }

    await processBatchApplications(batchForm)

    // 重置表单
    Object.assign(batchForm, {
      status: 'approved',
      review_comments: '',
      scheduled_date: '',
      scheduled_time_start: '',
      scheduled_time_end: '',
      location: ''
    })
  } catch (error) {
    console.error('批量审核验证失败:', error)
  }
}

// 初始化
onMounted(() => {
  fetchApplicationList()
  fetchStatistics()
})
</script>

<style scoped>
.interview-applications-container {
  min-height: 100vh;
  background: var(--el-bg-color-page);
  display: flex;
  flex-direction: column;
  transition: background-color 0.3s ease;
}

.page-header {
  background: var(--el-bg-color);
  border-bottom: 1px solid var(--el-border-color);
  transition: all 0.3s ease;
  padding: 24px 32px;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.header-content {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-left {
  flex: 1;
}

.page-title {
  font-size: 28px;
  font-weight: 700;
  color: var(--el-text-color-primary);
  margin: 0 0 4px 0;
  line-height: 1.2;
}

.page-subtitle {
  font-size: 14px;
  color: var(--el-text-color-secondary);
  margin: 0;
}

.header-actions {
  display: flex;
  gap: 12px;
}

.page-content {
  flex: 1;
  padding: 24px 32px;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
}

.statistics-section {
  margin-bottom: 24px;
}

.stat-card {
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  overflow: hidden;
  transition: all 0.3s ease;
}

.stat-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

.stat-content {
  display: flex;
  align-items: center;
  padding: 20px;
}

.stat-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 16px;
  font-size: 24px;
  color: white;
}

.stat-icon.pending {
  background: linear-gradient(135deg, #f59e0b, #d97706);
}

.stat-icon.approved {
  background: linear-gradient(135deg, #10b981, #059669);
}

.stat-icon.completed {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
}

.stat-icon.total {
  background: linear-gradient(135deg, #8b5cf6, #7c3aed);
}

.stat-info {
  flex: 1;
}

.stat-value {
  font-size: 24px;
  font-weight: 700;
  color: var(--el-text-color-primary);
  line-height: 1;
  margin-bottom: 4px;
}

.stat-label {
  font-size: 14px;
  color: var(--el-text-color-secondary);
  font-weight: 500;
}

.filter-section {
  margin-bottom: 24px;
}

.filter-card {
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  overflow: hidden;
}

.filter-row {
  padding: 20px;
}

.filter-select,
.filter-input {
  width: 100%;
}

.filter-actions {
  display: flex;
  gap: 12px;
  width: 100%;
}

.table-section {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.table-card {
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  overflow: hidden;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.table-container {
  flex: 1;
}

.application-table {
  width: 100%;
  font-size: 14px;
}

:deep(.el-table) {
  border-radius: 0;
  border: none;
}

:deep(.el-table__header-wrapper) {
  border-radius: 0;
}

:deep(.el-table th) {
  border-bottom: 2px solid #e5e7eb;
  font-weight: 600;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

:deep(.el-table td) {
  border-bottom: 1px solid #f3f4f6;
  padding: 16px 12px;
}

:deep(.el-table__row:hover) {
  background-color: var(--el-fill-color-lighter);
}

:deep(.el-table__row--striped) {
  background-color: var(--el-fill-color-light);
}

:deep(.el-table__row--striped:hover) {
  background-color: var(--el-fill-color);
}

.action-buttons {
  display: flex;
  gap: 8px;
  justify-content: center;
  align-items: center;
}

.action-btn {
  padding: 4px 8px;
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.pagination-wrapper {
  padding: 20px 24px;
  display: flex;
  justify-content: center;
  background: var(--el-bg-color);
  border-top: 1px solid var(--el-border-color);
  transition: all 0.3s ease;
}

:deep(.el-pagination) {
  font-weight: 500;
}

:deep(.el-pagination .btn-next),
:deep(.el-pagination .btn-prev) {
  border-radius: 6px;
}

:deep(.el-pagination .el-pager li) {
  border-radius: 6px;
  margin: 0 2px;
}

.review-content {
  max-height: 60vh;
  overflow-y: auto;
}

.application-info {
  margin-bottom: 24px;
}

.application-info h4 {
  font-size: 16px;
  font-weight: 600;
  color: var(--el-text-color-primary);
  margin: 0 0 12px 0;
}

.review-form h4 {
  font-size: 16px;
  font-weight: 600;
  color: var(--el-text-color-primary);
  margin: 0 0 16px 0;
}

.dialog-footer {
  text-align: right;
}

.batch-review-content {
  max-height: 60vh;
  overflow-y: auto;
}

.selected-count {
  margin-bottom: 16px;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .page-content {
    padding: 20px 24px;
  }

  .header-content {
    padding: 0 24px;
  }
}

@media (max-width: 768px) {
  .page-content {
    padding: 16px 20px;
  }

  .header-content {
    padding: 0 20px;
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
  }

  .header-actions {
    width: 100%;
    justify-content: flex-end;
  }

  .filter-row {
    padding: 16px;
  }

  .filter-actions {
    justify-content: stretch;
  }

  .filter-actions .el-button {
    flex: 1;
  }

  .stat-content {
    padding: 16px;
  }

  .stat-icon {
    width: 40px;
    height: 40px;
    font-size: 20px;
    margin-right: 12px;
  }

  .stat-value {
    font-size: 20px;
  }

  :deep(.el-table) {
    font-size: 13px;
  }

  :deep(.el-table td) {
    padding: 12px 8px;
  }

  .action-buttons {
    flex-direction: column;
    gap: 4px;
  }

  .action-btn {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .page-header {
    padding: 20px 16px;
  }

  .page-content {
    padding: 16px;
  }

  .page-title {
    font-size: 24px;
  }

  .header-actions {
    flex-direction: column;
    gap: 8px;
  }

  .header-actions .el-button {
    width: 100%;
  }

  .filter-row {
    padding: 12px;
  }

  .stat-content {
    padding: 12px;
  }
}
</style>
